<template>
  <div>
    <el-container>
      <el-header>
        <div class="headerStyle">
          <div>
            <el-button size="mini" type="success" @click="getLost" icon="el-icon-refresh">刷新</el-button>
            <el-button size="mini" type="primary" @click="addLost" class="btnStyle">发布</el-button>
          </div>
          <div >
            <el-input v-model="keywords" size="mini" placeholder="请输入查询内容" style="width:180px" clearable></el-input>
            <el-date-picker v-model="checkDate" size="mini" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期" style="width:260px"
                            @change="handleDate"></el-date-picker>
            <el-button size="mini" type="primary" @click="checkBtn" class="btnStyle">查 询</el-button>
            <el-button size="mini" type="primary" @click="InputEmpty" class="btnStyle">重 置</el-button>
          </div>
        </div>

      </el-header>
      <el-main>
        <div class="cardStyle">
          <div v-for="item in lostCardInfo" :key="item.value" :label="item.label" :value="item.value">
            <el-card style=" margin-right: 15px;margin-bottom:25px;width:300px ; ">
              <div style="padding:10px">
                <div style="height:30px">
                  <span>{{item.content}}</span>
                </div>
                <br>
                <img :src="item.imgUrl" style="width: 250px; height: 250px">
                <div>
                  发布者：{{item.creater}}
                </div>
                <div>
                  时间：{{item.createTime}}
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="lastLine">               
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page.sync="pageNum" :page-size="pageSize" :page-sizes="[12]"
                         layout="sizes, prev, pager, next" :total="total">      
          </el-pagination>
        </div>

      </el-main>

    </el-container>
    <el-dialog width="40%" title="添加" :visible.sync="clickAdd">
      <el-form :model="addFrom" class="formStyle" :rules="rules" ref="addFrom" label-width="120px%">       
        <el-form-item label="描述：" prop="content">
          <el-input v-model="addFrom.content" type="textarea" :rows="4" resize="none">
          </el-input>
        </el-form-item>
        <el-form-item label="图片：" prop="imgUrl">
          <el-upload :action="action" :file-list="file" list-type="picture-card" :on-remove="handleRemove"
                     :on-preview="handlePreview" :on-success="handleAvatarSuccess" :on-change="handleChange">
            <div class="aa">
              <el-button class="btn">添加图片</el-button>
            </div>
          </el-upload>
        </el-form-item>

      </el-form>
            
      <div slot="footer">            
        <el-button type="primary" size="mini" @click="clickAdd= false">取 消</el-button>
        <el-button type="primary" size="mini"  @click="add('addFrom')">发 布</el-button>
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {getRequest, postMethod, postRequest, putRequest} from "../../utils/api";

  export default {
    data() {
      return {
        pageNum: 1,
        pageSize: 12,
        total: 0,
        dialogVisible: false,
        action: 'img/fileUpload',//图片接口
        file: [],
        dialogImageUrl: '',
        clickAdd: false,
        addFrom: {
          imgUrl: '',
          content: '',
        },
        keywords: '',

        checkDate: '',
        lostCardInfo: {
          content: '',
          creater: '',
          createTime: '',
          imgUrl: '',
        },
        periodTime: {
          startTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
        },
        imgCardUrl: '',
        rules: {
          imgUrl: [
            {required: true, message: '请上传图片', trigger: 'blur'}
          ],
          describe: [
            {required: true, message: '请输入描述', trigger: 'blur'}
          ],
        }
      };
    },
    created() {
      this.getLost();//获取失物信息
    },
    methods: {
      getLost() {
        this.tableLoading = true;
        var _this = this;
        this.getRequest("/lost/los/findAllLost?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
          _this.cardLoading = false;
          if (resp && resp.status == 200) {
            console.log(resp)
            this.total = resp.data.obj.total
            this.lostCardInfo = resp.data.obj.data
            for (var i = 0; i < this.lostCardInfo.length; i++) {
              var tempdate
              tempdate = this.lostCardInfo[i].createTime
              this.lostCardInfo[i].createTime = tempdate.slice(0, tempdate.indexOf("."))
            }
          }
        })
      },
      addLost() {
        this.file = []
        this.addFrom.imgUrl = ''
        this.addFrom.content = ''
        this.clickAdd = true
      },
      add(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            postMethod("/lost/los/addLost", this.addFrom).then(resp => {
              if (resp && resp.status == 200) {
                this.clickAdd = false
                this.getLost();
                Message.success({message: resp.data.msg});
              }
            })
          } else {
            return false
          }
        })
      },
      handlePreview(file) {       //添加查看大图
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(response, file) {
        this.addFrom.imgUrl = file.url;
      },
      handleChange() {
      },
      handleRemove() {

      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getLost()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getLost()
      },
      checkBtn() {
        getRequest("/lost/findByKeyWords/" + this.keywords).then(resp => {
          if (resp && resp.status == 200) {
            this.lostCardInfo = resp.data.obj
          }
        })
      },
      handleDate(row) {
        this.periodTime.startTime = this.getDate(row[0])
        this.periodTime.endTime = this.getDate(row[1])
        postMethod("/lost/los/getByPeriod", this.periodTime).then(resp => {
          if (resp && resp.status == 200) {
            console.log(resp)
            this.lostCardInfo = resp.data.obj
          }
        })
      },
      getDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var date1 = year + '-' + formatNumber(month) + '-' + formatNumber(day)
        return date1

        function formatNumber(n) {   //补零
          n = n.toString()
          return n[1] ? n : '0' + n
        }
      },
      InputEmpty() {
        this.keywords = '';
        this.checkDate = '';
        this.getLost();
      },
    },
  }


</script>

<style scoped>
  .lastLine {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 10 px 0 10px 0;
  }

  .cardStyle {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 5px 20px 20 xp 0px;
  }

  .headerStyle {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .checkStyle {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
  }

  .formStyle {
    width: 100%;
    text-align: left;
  }

  .btnStyle {
    margin-top: 20px;
  }


</style>
